<template>
  <div class="exam-create-container">
    <!-- 基本信息部分 -->
    <div class="section">
      <h2 class="section-title">基本信息</h2>
      <div class="form-grid">
        <div class="form-item required">
          <label>考试名称：</label>
          <el-input v-model="exam.name" placeholder="请输入考试名称"></el-input>
        </div>
        <div class="form-item required">
          <label>考试时间：</label>
          <el-date-picker
            v-model="exam.time"
            type="datetime"
            placeholder="请选择考试时间"
          ></el-date-picker>
        </div>

        <div class="form-item">
          <label>参加限制：</label>
          <div class="inline-inputs">
            <span>考试开始</span>
            <el-input-number
              v-model="exam.limit.joinAfterStart"
              :min="0"
              controls-position="right"
              style="width: 100px"
            ></el-input-number>
            <span>分钟后禁止参加考试</span>
          </div>
        </div>
        <div class="form-item required">
          <label>答题时间：</label>
          <el-input-number
            v-model="exam.duration"
            :min="1"
            controls-position="right"
            style="width: 200px"
          ></el-input-number>
          <span style="margin-left: 10px">分钟</span>
        </div>

        <div class="form-item">
          <label>交卷限制：</label>
          <div class="inline-inputs">
            <span>开始考试</span>
            <el-input-number
              v-model="exam.limit.submitBefore"
              :min="0"
              controls-position="right"
              style="width: 100px"
            ></el-input-number>
            <span>分钟内不允许交卷</span>
          </div>
        </div>

        <div class="form-item required full-width">
          <label>考试说明：</label>

          <el-input
            type="textarea"
            v-model="exam.description"
            :rows="4"
            placeholder="请输入考试说明"
          ></el-input>
        </div>
      </div>
    </div>

    <!-- 试卷设置部分 -->
    <div class="section">
      <h2 class="section-title">试卷设置</h2>
      <div class="form-grid">
        <div class="form-item required">
          <label>选择试卷：</label>
          <el-select v-model="exam.paperId" placeholder="请选择">
            <el-option
              v-for="item in paperOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>

        <div class="form-item">
          <label>试题排序：</label>
          <el-radio-group v-model="exam.questionOrder">
            <el-radio label="fixed">固定排序</el-radio>
            <el-radio label="random">随机排序</el-radio>
          </el-radio-group>
        </div>

        <div class="form-item">
          <label>选项排序：</label>
          <el-radio-group v-model="exam.optionOrder">
            <el-radio label="fixed">固定排序</el-radio>
            <el-radio label="random">随机排序</el-radio>
          </el-radio-group>
        </div>

        <div class="form-item required">
          <label>及格分数：</label>
          <el-input-number
            v-model="exam.passingScore"
            :min="0"
            controls-position="right"
            style="width: 200px"
          ></el-input-number>
          <span style="margin-left: 10px">分</span>
          <span class="hint">(满分{{ exam.totalScore }}分)</span>
        </div>
      </div>
    </div>

    <!-- 考生信息部分 -->
    <div class="section">
      <h2 class="section-title">考生信息</h2>
      <div class="table-actions">
        <el-button type="primary" size="small" @click="addCandidate"
          >添加</el-button
        >
        <el-button type="primary" size="small" @click="importCandidates"
          >导入</el-button
        >
        <el-button type="primary" size="small" @click="editCandidate"
          >编辑</el-button
        >
        <el-button type="danger" size="small" @click="deleteCandidate"
          >删除</el-button
        >
      </div>

      <el-table
        :data="candidates"
        @selection-change="handleSelectionChange"
        border
        style="width: 100%; margin-top: 15px"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="id" label="序号" width="60"></el-table-column>
        <el-table-column prop="name" label="姓名" width="120"></el-table-column>
        <el-table-column
          prop="idCard"
          label="证件"
          width="180"
        ></el-table-column>
        <el-table-column
          prop="gender"
          label="性别"
          width="80"
        ></el-table-column>
        <el-table-column
          prop="phone"
          label="联系电话"
          width="150"
        ></el-table-column>
      </el-table>
    </div>

    <el-dialog
      :title="isEdit ? '编辑考生' : '添加考生'"
      :visible.sync="dialogVisible"
      width="600px"
    >
      <el-form :model="currentStudent" label-width="80px">
        <el-form-item label="姓名" prop="name" required>
          <el-input v-model="currentStudent.name"></el-input>
        </el-form-item>
        <el-form-item label="证件号" prop="idCard" required>
          <el-input v-model="currentStudent.idCard"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="gender">
          <el-select v-model="currentStudent.gender" placeholder="请选择">
            <el-option label="男" value="男"></el-option>
            <el-option label="女" value="女"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input v-model="currentStudent.phone"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleDialogConfirm">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 操作按钮 -->
    <div class="action-buttons">
      <el-button @click="cancel">取消</el-button>
      <el-button type="primary" @click="submit">保存</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false, // 控制对话框显示
      isEdit: false, // 标记当前是编辑还是新增
      currentStudent: {}, // 当前操作的考生数据
      selectedStudents: [], // 表格选中的考生
      exam: {
        name: "",
        time: "",
        duration: 60,
        description: "",
        limit: {
          joinAfterStart: 0,
          submitBefore: 0,
        },
        paperId: "",
        questionOrder: "fixed",
        optionOrder: "fixed",
        passingScore: 60,
        totalScore: 100,
      },
      paperOptions: [
        { value: "1", label: "初中语文期末考试" },
        { value: "2", label: "初中数学期末考试" },
        { value: "3", label: "初中英语期末考试" },
      ],
      candidates: [
        {
          id: 1,
          name: "张三",
          idCard: "320102200001011234",
          gender: "男",
          phone: "13800138000",
        },
        {
          id: 2,
          name: "李四",
          idCard: "320102200002022345",
          gender: "女",
          phone: "13800138001",
        },
      ],
    };
  },
  methods: {
    addCandidate() {
      this.currentStudent = {
        id: null,
        name: "",
        idCard: "",
        gender: "",
        phone: "",
      };
      this.isEdit = false;
      this.dialogVisible = true;
    },
    importCandidates() {
      // 导入考生逻辑
      this.$message.info("导入考生功能");
    },
    editCandidate() {
      if (this.selectedStudents.length !== 1) {
        this.$message.warning("请选择一条要编辑的考生记录");
        return;
      }
      // 深拷贝选中数据
      this.currentStudent = JSON.parse(
        JSON.stringify(this.selectedStudents[0])
      );
      this.isEdit = true;
      this.dialogVisible = true;
    },
    // 删除考生
    deleteCandidate() {
      if (this.selectedStudents.length === 0) {
        this.$message.warning("请选择要删除的考生");
        return;
      }

      this.$confirm("确定删除选中的考生吗？", "提示", {
        type: "warning",
      }).then(() => {
        // 过滤保留未选中的考生
        this.candidates = this.candidates.filter(
          (item) => !this.selectedStudents.includes(item)
        );
        this.$message.success("删除成功");
      });
    },
    // 对话框确认操作
    handleDialogConfirm() {
      // 简单验证
      if (!this.currentStudent.name || !this.currentStudent.idCard) {
        this.$message.warning("姓名和证件号为必填项");
        return;
      }

      if (this.isEdit) {
        // 更新操作：找到索引并替换
        const index = this.candidates.findIndex(
          (item) => item.id === this.currentStudent.id
        );
        this.$set(this.candidates, index, this.currentStudent);
      } else {
        // 新增操作：生成ID并添加
        this.currentStudent.id = this.candidates.length
          ? Math.max(...this.candidates.map((i) => i.id)) + 1
          : 1;
        this.candidates.push(this.currentStudent);
      }

      this.dialogVisible = false;
      this.$message.success(this.isEdit ? "修改成功" : "添加成功");
    },
    // 表格选择变化
    handleSelectionChange(selection) {
      this.selectedStudents = selection;
    },
    cancel() {
      this.$router.go(-1);
    },
    submit() {
      this.$message.success("考试创建成功");
      this.$router.push("/main/exam-manage/detail");
    },
  },
};
</script>

<style scoped>
.exam-create-container {
  padding: 20px;
  background-color: #fff;
}

.section {
  margin-bottom: 30px;
  padding: 20px;
  border: 1px solid #ebeef5;
  border-radius: 4px;
}

.section-title {
  font-size: 16px;
  color: #303133;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #ebeef5;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.form-item {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.form-item label {
  width: 128px;
  text-align: right;
  padding-right: 12px;
  color: #606266;
}

.form-item.required label::before {
  content: "*";
  color: #f56c6c;
  margin-right: 4px;
}

.form-item.full-width {
  grid-column: 1 / 3;
}

.inline-inputs {
  display: flex;
  align-items: center;
}

.inline-inputs span {
  margin: 0 10px;
  color: #606266;
}

.hint {
  margin-left: 10px;
  color: #909399;
  font-size: 12px;
}

.table-actions {
  margin-bottom: 15px;
}

.action-buttons {
  text-align: center;
  margin-top: 30px;
}

.action-buttons .el-button {
  width: 120px;
  margin: 0 15px;
}
</style>
